<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/animate.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 1226px;
            margin: 50px auto;
            position: relative;
            /* overflow: hidden; */
        }

        .nav {
            display: flex;
            line-height: 40px;
            text-align: center;
            position: absolute;
            right: 50px;
            bottom: 20px;
            z-index: 9999;
        }

        .nav li {
            width: 10px;
            height: 10px;
            border: 1px solid #333;
            border-radius: 50%;
            margin: 0 5px;
        }

        .active {
            background-color: #6ff;
            color: #fff;
        }

        .swiper {
            width: 500%;
            height: 460px;
            overflow: hidden;
            position: relative;
        }

        .swiper .swiper-item {
            width: 20%;
            float: left;
        }

        .swiper .swiper-item img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="swiper clear">
            <div class="swiper-item"><img src="../images/1.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/2.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/3.jpg" alt=""></div>
            <div class="swiper-item"><img src="../images/4.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/1.webp" alt=""></div>
        </div>
    </div>
</body>
<script>
    var wrap = document.getElementsByClassName("wrap")[0];
    var nav = document.getElementsByClassName("nav")[0];
    var liList = nav.getElementsByTagName("li");  // [li,li,li,li,li,li]

    var swiper = document.getElementsByClassName("swiper")[0];
    var swiperItems = swiper.getElementsByClassName("swiper-item");

    var swiperWidth = wrap.clientWidth; //一张图片的宽度


    var index = 0;   //全局变量 记录轮播的下标
    var timer = null;  // 全局变量 记录轮播的编号

    // 页面加载时 启动自动轮播
    autoPlay();


    // 轮播图如何滚动?
    // 1. 四张图片对应四个点(导航)  一一对应
    // 2. 发现 向左滚几张图片的距离 和 下标一一对象
    //    显示第2张图  => 下标1  => 向左滚1张
    //    显示第3张图  => 下标2  => 向左滚2张
    //    显示第4张图  => 下标3  => 向左滚3张


    for (let i = 0; i < liList.length; i++) {  // i=> 0-5
        let li = liList[i];  //获取对应下标的元素
        li.onclick = function () {

            // 点击时记录下标  => 下次从点击位置开始轮播
            index = i;

            // 点击时记录轮播的下标 -> 下次轮播 从当前点击位置开始
            for (var j = 0; j < liList.length; j++) {
                liList[j].className = ""; // 清除每一个导航的class名
            }
            liList[i].className = "active";

            animate(swiper, { left: -(swiperWidth * i) }, "slow", function () {
                console.log(`切换到第${i + 1}张`);
            })

        }
    }

    wrap.onmouseenter = function () {
        clearInterval(timer);
    }

    wrap.onmouseleave = function () {
        autoPlay();
    }


    // 无缝轮播直接从第四张切换到第一张  => 不好看 => 有没有什么方法让第四张平滑的滚动到第一张?

    // 解决方法: 障眼法
    //  在第四张之后 加一张图片(第五张)同第一张  => 等第四张滚动到第五张之后瞬间切换到第一张(因为第五张和第一张一样,从视觉方面觉得是一张)

    // 如何判断是否是从第四张 滚动 到 第五张?


    function autoPlay() {
        clearInterval(timer);
        // 自动轮播
        timer = setInterval(function () {
            index++;  // 0 1 2 3  
            console.log(index);

            for (var j = 0; j < liList.length; j++) {
                liList[j].className = ""; // 清除每一个导航的class名
            }

            // 点的问题:
            //   点(四个):0 1 2 3     
            // 图片(五张):0 1 2 3 4(第五张)    => 第五张图片没有导航对应 liList[4] => undefined

            // 解决方法: 
            // 因为第五张同第一张(障眼法),滚动到第五张时应该将第一张变为活跃状态

            var activeIndex = index == swiperItems.length - 1 ? 0 : index;
            liList[activeIndex].className = "active";

            animate(swiper, { left: -(swiperWidth * index) }, "slow", function () {
                // 每次滚动结束时 会执行的回调函数
                // console.log("index", index);

                // 每次滚动结束时 判断是否滚动到第五张(下标: 4) 
                if (index >= swiperItems.length - 1) { // index >= 4 (滚动第五张)
                    swiper.style.left = 0;
                    index = 0;
                }

            })



        }, 3000)

    }





</script>

</html>